<template>
	<div>
		<el-container style="height: 100vh; border: 1px solid #eee">
			<el-aside :style="{width:isCollapse?'65px':'200px'}" style="background-color: rgb(238, 241, 246)">
				<FireSidebarLogo title="店滴开发文档" :collapse="isCollapse"></FireSidebarLogo>
				<side-nav  :navsData="navsData" :type="topType" :isCollapse="isCollapse" :showHederMenu="showHederMenu"></side-nav>
			</el-aside>

			<el-container>
				<el-header  class="header">
					<el-row :gutter="10">
					  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
						  <div class="hamburger"  :class="{'is-active-icon':isCollapse}" @click="SetLeft">
						  	<i class="el-icon-s-fold" :style="{ color : '#ccc' } " ></i>
						  </div>
					  </el-col>
					  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11" v-show="showHederMenu">
						  <el-menu  :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :popper-append-to-body="true">
						     
						    <el-menu-item index="1">uniapp-Fui</el-menu-item>
						    <el-menu-item index="2">店滴后台</el-menu-item>
						    <el-menu-item index="3"><a href="http://www.wayfirer.com/" target="_blank">官网</a></el-menu-item>
						    <el-menu-item index="4"><a href="https://www.hopesfire.com" target="_blank">粉丝社区</a></el-menu-item>
						    <el-menu-item index="5"><a href="https://gitee.com/wayfiretech_admin/diandi" target="_blank">git下载</a></el-menu-item>				
						  </el-menu>
					  </el-col>
					  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
					  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
					</el-row>
					
					
					
					
					
					<div class="line"></div>
					
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	import navsData from "../fui.config.json";
	import '../assets/css/bootstrap.min.css';
	import '../assets/icon/iconfont.css';
	import 'highlight.js/styles/github-gist.css';

	export default {
		data() {
			return {
				showHederMenu:true,
				isCollapse:false,
				navsData,
				activeIndex: '1',
				topType:'fui',
				widheight:'',
				widwidth:''
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				if(key==1){
					this.topType = 'fui'
				}else if(key==2){
					this.topType = 'diandi'
				}
				console.log(key, keyPath);
			},
			SetLeft(){
				this.isCollapse = !this.isCollapse
				console.log(this.isCollapse)
			}
		},
		created(options) {
			let that = this
			console.log('请求参数', options)
			that.$nextTick(function () {
				
			    that.widheight=  `${document.documentElement.clientHeight}`;
				that.widwidth = `${document.documentElement.clientWidth}`
				console.log('请求参数', options,that.widwidth)
				if(that.widwidth<768){
					  //xs  
					  that.isCollapse = true
					  that.showHederMenu = false
					  
				}
			})
		}
	}
</script>
<style scoped>
	.main {
		padding: 30px 0 0 220px;
	}

	
	.content {
		width: 1000px;
		margin: 30px auto;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.header {
		width: 100%;
		height: 62px;
		top: 0;
		left: 0;
		background: #fff;
		border-bottom: 1px #eee solid;
		box-shadow: 0px 2px 5px #eee;
		box-sizing: border-box;

		font-size: 20px;
		line-height: 60px;
	}
	
	.hamburger{
		float: left;
		height: 65px;
		cursor: pointer;
		text-align: center;
		line-height: 65px;
		margin: 0;
		border-bottom: 2px solid transparent;
		color: #909399;
		width: 60px;
	}
	
	
	.hamburger i{
		color: #409EFF!important;
		
	}
	 .hamburger.is-active-icon {
	    transform: rotate(180deg);
	}
	
	li.el-menu-item.hamburger.is-active {
	    border-bottom: none;
	}
 
</style>
